<template>
    <div id="app" @contextmenu="noContextMenu">

        <!--游戏Logo-->
        <game-logo 
            v-if="isLoading" 
            @contextmenu="noContextMenu"
        />

        <!--加载界面-->
        <loading-pannel 
            v-if="isShowLoadingPannel" 
            @contextmenu="noContextMenu" 
            :progressValue="progressValue"
        />

        <!--客户端登录窗口-->
        <login-win 
            v-if="!isLogin" 
            @contextmenu="noContextMenu" 
            :version="version" 
            :loginSuccessful="loginSuccessful"
            :userInfo="userInfo"
        />

        <!--客户端窗口-->
        <client-win 
            v-if="isShowClient"
            @contextmenu="noContextMenu"
            :userInfo="userInfo"
            :version="version"
            :currUser="currUser"
            :isShowClient="isShowClient"
            :sortFriendBarByState="sortFriendBarByState"
            :switchState="switchState"
            :noContextMenu="noContextMenu"
            :addFriend="addFriend"
            :openMenu="openMenu"
        />

        <!-- 右键菜单 -->   
        <context-menu 
            v-show="isShowContextMenu"
            :removeFriend="removeFriend"
            :style="{left: mousePos.x + 'px', top: mousePos.y + 'px'}"
        />     

    </div>
</template>

<script>
import GameLogo from './components/GameLogo.vue'
import LoadingPannel from './components/LoadingPannel.vue'
import LoginWin from './components/LoginWin.vue'
import ClientWin from './components/ClientWin.vue'
import ContextMenu from './components/ContextMenu.vue'


export default {
    name: 'App',
    components:{
        GameLogo,
        LoadingPannel,
        LoginWin,
        ClientWin,
        ContextMenu,
    },
    data(){
        return {
            //版本号
            version: "V50.0.6",

            //用户信息 （账号，密码，游戏id 等信息）有缓存数据就用缓存，没缓存用初始数据
            userInfo: JSON.parse(localStorage.getItem("userInfo"))  ||
            [
                {
                    index: 0,                                                               //用户索引 
                    userId:"123456",                                                        //用户名
                    password:"123456",                                                      //密码
                    gameId:"Yo很fan不想打了",                                                //玩家游戏ID
                    img:"https://opgg-static.akamaized.net/images/profile_icons/profileIcon5331.jpg",  //玩家头像
                    cardBg: "https://game.gtimg.cn/images/lol/act/img/skin/big104003.jpg",  //玩家卡片的背景
                    gameState: 1,                                                           //玩家游戏状态
                    rank: "华贵铂金Ⅳ（单排/双排）",
                    friends:[],                                                             //玩家的好友列表
                },
                {
                    index: 1, 
                    userId:"asdasd", 
                    password:"asdasd", 
                    gameId:"ly135250", 
                    img:"https://game.gtimg.cn/images/lol/act/img/profileicon/1377.png",
                    cardBg: "https://game.gtimg.cn/images/lol/act/img/skin/big76000.jpg",  
                    gameState: 0,
                    rank: "华贵铂金Ⅱ（单排/双排）",
                    friends:[],
                },
                {
                    index: 2, 
                    userId:"aaaaaa", 
                    password:"ssssss", 
                    gameId:"好兄弟这样肘胃", 
                    img:"https://game.gtimg.cn/images/lol/act/a20210625icon/avatar19.png",
                    cardBg: "https://game.gtimg.cn/images/lol/act/img/skin/big104018.jpg",  
                    gameState: 2,
                    rank: "荣耀黄金Ⅲ（单排/双排）",
                    friends:[],
                },
                {
                    index: 3, 
                    userId:"ssssss", 
                    password:"aaaaaa", 
                    gameId:"Hide on bush", 
                    img:"https://game.gtimg.cn/images/lol/act/img/profileicon/6.png",
                    cardBg: "https://game.gtimg.cn/images/lol/act/img/skin/big238010.jpg",  
                    gameState: 4,
                    rank: "最强王者（单排/双排）",
                    friends:[],
                },
                {
                    index: 4, 
                    userId:"qweqwe", 
                    password:"qweqwe", 
                    gameId:"打提莫的都是坏人", 
                    img:"https://opgg-static.akamaized.net/images/profile_icons/profileIcon5294.jpg",
                    cardBg: "https://game.gtimg.cn/images/lol/act/img/skin/big555044.jpg",  
                    gameState: 3,
                    rank: "傲视宗师（单排/双排）",
                    friends:[],
                },
                {
                    index: 5, 
                    userId:"zxczxc", 
                    password:"zxczxc", 
                    gameId:"爱情陷阱丶张嘉文", 
                    img:"https://opgg-static.akamaized.net/images/profile_icons/profileIcon502.jpg",
                    cardBg: "https://game.gtimg.cn/images/lol/act/img/skin/big104003.jpg",  
                    gameState: 0,
                    rank: "超凡大师（单排/双排）",
                    friends:[],
                },
                {
                    index: 6, 
                    userId:"dddddd", 
                    password:"dddddd", 
                    gameId:"爷傲丶奈我何", 
                    img:"https://game.gtimg.cn/images/lol/act/img/profileicon/29.png",
                    cardBg: "https://game.gtimg.cn/images/lol/act/img/skin/big157010.jpg",  
                    gameState: 0,
                    rank: "荣耀王者⭐100",
                    friends:[],
                },
            ],

            //当前用户
            currUser: undefined,
            //右键选择的玩家
            chosenUser:{},
            //登陆状态
            isLogin: false,
            //是否登录失败
            isLoginFail: false,
            //是否正在加载
            isLoading: false,
            //是否显示加载画面
            isShowLoadingPannel: false,
            //是否显示客户端
            isShowClient: false,
            //是否显示右键菜单
            isShowContextMenu: false,
            //进度条属性
            progressColor:[{color: "red", percentage: 100}],
            progressValue: 0,

            //鼠标位置
            mousePos:{
                x: 0, y: 0,
            }
      
        }
    },
    methods:{
        //成功登录时获取当前登录的玩家信息（作为prop传给LoadingWin组件）
        loginSuccessful(user){
            this.currUser = user    //获取并记录当前登录的玩家信息

            this.isLogin = true;    //登录状态改为登录
            this.currUser.gameState = 1;    //将当前玩家的游戏状态改为【在线】
            this.sortFriendBarByState();    //重新排序好友栏

            //游戏客户端界面开始加载
            setTimeout(()=>{
                this.loading();
            }, 1000);
        },

        //登录加载
        loading(){
            this.isLoading = true;
            setTimeout(()=>{
                this.isShowLoadingPannel = true;
                const t = setInterval(()=>{
                    this.progressValue += 5;
                    if(this.progressValue >= 100)clearInterval(t);
                }, 60);
                this.isLoading = false;

                setTimeout(() => {
                    this.isShowLoadingPannel = false;
                    this.isShowClient = true;
                }, 3000);

            }, (Math.random()*2 + 3) * 1000);
        },
                    
        //通过【游戏Id】获取【userInfo对象】
        findUserByGameID(gameId){
            for(let i = 0;i < this.userInfo.length;i++){
                if(this.userInfo[i].gameId == gameId){
                    return this.userInfo[i];
                }
            }
            console.log("找不到该召唤师");
        },

        /*************************
        为玩家添加好友    需要两个参数：1.为谁添加好友（userInfo对象） 2.要添加的玩家id（字符串）
        添加成功返回值为 true  添加失败返回值为错误原因字符串
        **************************/
        addFriend(user, fgameId){
            //判断该玩家是否是自己
            if(fgameId == user.gameId){
                return "无法添加自己为好友";
            }

            const fuser = this.findUserByGameID(fgameId);
            //判断该玩家是否存在
            if(fuser){
                //判断该玩家是否已经为好友
                if(user.friends.indexOf(fuser) != -1){
                    return "无法重复添加好友";
                }
                user.friends.push(fuser);
                console.log("成功将", fuser.gameId, "添加为", user.gameId, "的好友");

                //自动排序
                this.sortFriendBarByState();

                return "成功将 '" + fuser.gameId + "'添加为 '" + user.gameId + "' 的好友";
            }
            else
                return "找不到该召唤师";
        },
                    
        //切换游戏状态  user：需要切换状态的对象
        switchState(user){
            //如果当前状态是【离开】就切换为【在线】  否则都切换为【离开】
            if(user.gameState == 2){
                user.gameState = 1;
            }
            else
                user.gameState = 2;
        },

        //自动按照【游戏状态】排序当前登录的玩家的好友栏（只看是否为【离线】状态,【离线】状态排下面）
        sortFriendBarByState(){
            this.currUser.friends.sort((a, b)=>{
                return ((a.gameState == 0? 1: 0) - (b.gameState == 0? 1: 0));
            })
        },

        //移除好友
        removeFriend(user = this.currUser, friend = this.chosenUser){
            if(this.currUser.friends.indexOf(friend) != -1){
                this.currUser.friends.splice(this.currUser.friends.indexOf(friend), 1);
                console.log("已将 '", friend.gameId, "' 移出 '", user.gameId, "' 的好友列表");
                return;
            }
            else{
                console.log("'", friend.gameId, "' 不是 '", user.gameId, "' 的好友");
            }
        },

        //禁用右键
        noContextMenu(e){
            //阻止默认事件
            e.preventDefault();
        },

        //右键事件 打开右键菜单窗口
        openMenu(e){
            //阻止默认事件
            e.preventDefault();

            //通过触发右键事件的标签身上的thisUser属性获取鼠标选择的玩家
            this.chosenUser = this.findUserByGameID(e.currentTarget.getAttribute("thisUser"));
        
            //获取此时鼠标位置
            this.mousePos.x = e.clientX
            this.mousePos.y = e.clientY

            //显示右键菜单
            this.isShowContextMenu = true
        },

        //更该玩家头像  url：头像地址, user：为谁更改头像，默认值为当前登录的玩家
        changeTouXiang(url, user = this.currUser){
            user.img = url
        },
    },
    watch:{
        userInfo:{
            deep: true,
            handler(newValue){
                localStorage.setItem('userInfo', JSON.stringify(newValue))
            }
        }
    },
    mounted() {
        //为全局事件总线$bus注册事件

        //“更改头像”事件 触发时回调 changeTouXiang函数
        this.$bus.$on('onChangeTouXiang', this.changeTouXiang)

        //左键点任意位置关闭 右键菜单窗口
        window.onclick = () =>{
            this.isShowContextMenu = false
        }
    },
}
</script>

<style>
    *{
        user-select: none;
        user-zoom: none;
        -webkit-user-drag: none;  
        overflow: hidden;  
    }
    
    /* 滚动条样式 */
    ::-webkit-scrollbar{
        background-color: rgba(0, 0, 0, 0);
        width: 7px;
    }
    ::-webkit-scrollbar-thumb{
        background-color: rgb(150, 115, 41);
        border-radius: 20px; 
    }
    ::-webkit-scrollbar-thumb:hover{
        background-color: rgb(209, 168, 79);
        border-radius: 20px; 
    }

    body{
        background-image: linear-gradient(to top,rgb(0, 5, 17) , rgb(0, 33, 122));
        background-size: auto 100vh;
        background-attachment: fixed;
    }

    .pannel{
        margin-top: 30px;
        height: 900px; 
        width: 1600px;
        background-color: black;
        margin-left: auto;
        margin-right: auto;
    }
</style>
